<template>
  <div>
    <div class="form-fragment">
      <div class="form-container">
        <el-form label-width="80px" label-position="top">
          <el-form-item label="商品图片">
            <template v-slot:label>
              <label class="el-form-item__label">
                <span>商品图片</span>
                <span style="color:#909090;">(图片尺寸建议800*800，第一张作为商品的封面)</span>
              </label>
            </template>
            <tbc-thumbnail v-model="form.images" :max="5" width="100px" height="100px" @upload="showFileManager(1)"
            />
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="form-fragment">
      <div class="form-container">
        <el-tabs type="card" v-model="tabIndex">
          <el-tab-pane label="电脑端" name="pc">
            <div style="margin-top: 20px">
              <tbc-rich-editor v-model="form.detail"/>
            </div>
          </el-tab-pane>

          <el-tab-pane label="手机端" name="mobile">
            <div style="display: flex;flex-direction: row;margin-top: 20px">
              <div style="height: 500px;width: 320px; border: 1px solid #e7e7eb;">
                <el-scrollbar height="500px">
                  <tbc-mixin-input ref="mixin" v-model="form.detail_mobile" @edit="onMixinEdit"/>
                </el-scrollbar>
              </div>
              <div class="el-highlight" style="margin-left: 10px">
                <p>
                  <el-button
                      type="primary"
                      icon="el-icon-picture" @click="showFileManager(2)">添加图片
                  </el-button>
                </p>
                <p style="margin-top: 10px">
                  <el-button
                      icon="el-icon-picture" @click="$refs.mixin.addText()">添加文字
                  </el-button>
                </p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
  <tbc-file-manager ref="file" @select="onFileSelected" :selectable="['image']" :config="{maxSelect: 10}"/>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs, Ref} from 'vue'

interface DetailMobile {
  type: 'image' | 'text',
  value: string
}

export default defineComponent({

  setup() {

    let fileTarget = 1
    let mixinIndex = -1;
    const file: Ref = ref(null)
    const state = reactive({
      form: {
        detail: '',
        detail_mobile: [],
        images: []
      },
      tabIndex: 'mobile'
    })

    const init = (data: Record<string, string>): void => {
      state.form.detail = data.detail
      if (typeof data.images === 'object') {
        state.form.images = data.images
      } else {
        state.form.images = JSON.parse(data.images)
      }
      if (data.detail_mobile) {
        state.form.detail_mobile = JSON.parse(data.detail_mobile)
      }
    }

    const showFileManager = (target) => {
      file.value.show()
      fileTarget = target
    }

    const onFileSelected = (files: { file_url: string }[]) => {
      if (fileTarget === 2) return onMobileDetailSelectedImage(files)
      const images: string[] = []
      files.forEach((item: { file_url: string }) => {
        if (images.length < 5 - state.form.images.length) images.push(item.file_url)
      });
      (state.form.images as string[]) = [...state.form.images, ...images]
    }

    //
    const onMixinEdit = (index: number) => {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      mixinIndex = index
      showFileManager(2)
    }

    const onMobileDetailSelectedImage = (files: { file_url: string }[]) => {
      const detail: DetailMobile[] = []
      files.forEach((item: { file_url: string }) => {
        detail.push({
          type: 'image',
          value: item.file_url as string
        })
      });
      (state.form.detail_mobile as DetailMobile[]) = detail
    }

    const getFormData = (): Record<string, string> => {
      let form: Record<string, string> = {}
      form.images = JSON.stringify(state.form.images)
      form.goods_image = JSON.parse(JSON.stringify(state.form.images)).shift()
      form.goods_thumb = form.goods_image
      form.detail_mobile = JSON.stringify(state.form.detail_mobile)
      form.detail = state.form.detail
      return form
    }

    return {
      ...toRefs(state),
      init,
      file,
      showFileManager,
      onFileSelected,
      onMixinEdit,
      getFormData
    }
  },

  // methods: {
  //
  //
  //   initComponent(name, data) {
  //     if (this.$refs[name]) return this.$refs[name].init(data)
  //     setTimeout(() => {
  //       this.initComponent(name, data)
  //     }, 30)
  //   },
  //

  // }
})
</script>